<template>
  <view class="template-index tn-safe-area-inset-bottom">
    <!-- 提示信息 -->
    <u-toast ref="uToast" />
    <!-- 加载动画 -->
    <u-loading-page :loading="loading" :iconSize="100" />
    <!-- #ifdef MP-WEIXIN -->
    <!-- 添加小程序 -->
    <ui-add-tips />
    <!-- #endif -->
    <!-- 弹窗 -->
    <u-modal :show="show" :show-confirm-button="showConfirmButton" :confirm-text="confirmText" :title="title" :content='content' @cancel="hideModal" @confirm="confirm" />
    <!-- 顶部自定义导航 -->
    <u-navbar leftIcon=" " leftText=" " />
    <!-- <tn-nav-bar :isBack="false" index>
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center" @click="tn('/homePages/search')">
          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left" style="background-color: rgba(230,230,230,0.3);">
            <view class="custom-nav__search__icon tn-icon-search"></view>
            <view class="custom-nav__search__text tn-padding-left-xs">请输入关键字</view>
          </view>
        </view>
      </view>
    </tn-nav-bar> -->
    <!-- 轮播图 -->
    <swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="5000" @change="cardSwiper">
      <swiper-item v-for="(item, index) in banner" :key="index" :class="cardCur == index ? 'cur' : ''" @click="clickBanner(item)">
        <view class="swiper-item image-banner">
          <image :src="item.image" mode="aspectFill"></image>
        </view>
        <view class="swiper-item-text">
          <view v-if="item.title" class="tn-text-bold tn-color-white text-xl">{{ item.title }}</view>
          <view v-if="item.text" class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{ item.text }}</view>
        </view>
      </swiper-item>
    </swiper>
    <view class="indication">
      <block v-for="(item, index) in banner" :key="index">
        <view class="spot" :class="cardCur == index ? 'active' : ''"></view>
      </block>
    </view>
    <!-- 菜单 -->
    <u-grid :col="5" @click="tapTo">
      <u-grid-item v-for="(item, index) in menu" :key="index" :item="item">
        <view class="badge">
          <u-tag :show="item.badge" :text="item.badge" type="error" shape="circle" size="mini" />
        </view>
        <u--image :showLoading="true" :src="item.icon" width="80rpx" height="80rpx" :showMenuByLongpress="false" />
        <u--text type="info" size="12" align="center" :text="item.name" />
      </u-grid-item>
    </u-grid>
    <!-- 公告 -->
    <u-notice-bar :text="notice" direction="column" color="#9E9E9E" bg-color="#FFF" @click="clickNotice" />
    <view class='tn-tabbar-height'></view>
  </view>
</template>

<script>
import { getBanner, getMenu, getNotice } from '@/api'
export default {
  name: 'Index',
  data() {
    return {
      cardCur: 0,
      loading: true,
      show: false,
      title: '',
      content: '',
      confirmText: '确定',
      showConfirmButton: true,
      page: null,
      banner: [],
      menu: [],
      notice: [],
    }
  },

  created() {
    this.init();
  },

  methods: {
    // 初始化
    async init() {
      this.banner = await this.getBanner();
      this.menu = await this.getMenu();
      this.notice = await this.getNotice();
      this.loading = false;
    },

    // 轮播图
    async getBanner() {
      const { code, data, message } = await getBanner()
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      return data;
    },

    // 导航菜单
    async getMenu() {
      const { code, data, message } = await getMenu()
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      return data;
    },

    // 公告
    async getNotice() {
      const { code, data, message } = await getNotice()
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      return data;
    },

    // 轮播
    cardSwiper(e) {
      this.cardCur = e.detail.current
    },

    // 菜单点击
    async tapTo(e) {
      const { type, path, appId, login, stuauth, vip } = e;
      const isLogin = this.checkLogin(login);
      if (!isLogin) {
        this.show = true;
        this.title = '系统提示';
        this.content = '你还未登录，请先登录！';
        this.confirmText = '立即登录';
        this.showConfirmButton = true;
        this.page = 'pages/login/login';
        return;
      }
      const isStuauth = this.checkStuauth(stuauth);
      if (!isStuauth) {
        this.show = true;
        this.title = '系统提示';
        this.content = '未绑定学号 暂无法使用该服务';
        this.confirmText = '立即认证';
        this.showConfirmButton = true;
        this.page = 'pages/auth/auth';
        return;
      }
      const isVip = this.checkVip(vip);
      if (!isVip) {
        this.show = true;
        this.title = '系统提示';
        this.content = '仅对会员用户开放，请前往会员中心了解';
        this.confirmText = '立即开通';
        this.showConfirmButton = true;
        this.page = 'pages/vip/vip';
        return;
      }
      if (isLogin && isStuauth && isVip) {
        if (type == 'nav') return uni.$u.route(path);
        if (type == 'mp') return uni.navigateToMiniProgram({ appId: appId, path: path });
      }
    },

    // 检测登录
    checkLogin(login) {
      if (login) {
        if (login == this.isLogin) {
          return true;
        }
        return false;
      }
      return true;
    },

    // 学生认证
    checkStuauth(stuauth) {
      if (stuauth) {
        if (this.userInfo.username) {
          return true;
        }
        return false;
      }
      return true;
    },

    // 权限认证
    checkVip(vip) {
      if (vip) {
        if (this.userInfo.expire) {
          const nowTime = Date().getTime();
          const expireTime = Date.parse(this.userInfo.expire)
          if (expireTime > nowTime) {
            return true;
          }
        }
        return false;
      }
      return true;
    },

    // 隐藏弹窗
    hideModal() {
      this.show = false;
    },

    // 确认
    confirm() {
      this.show = false;
      if (!this.page) return;
      const timer = setTimeout(() => {
        clearTimeout(timer);
        uni.$u.route(this.page);
        this.page = null;
      }, 100);
    },

    // 点击公告
    clickNotice(e) {
      this.show = true;
      this.title = '系统公告';
      this.content = this.notice[e].label;
      this.showConfirmButton = false;
    },

    // 点击轮播图
    clickBanner(e) {
      const { type, appid, url } = e;
      switch (type) {
        case 'event':
          // this.$refs.uToast.show({
          //   type: 'error',
          //   message: '暂未开放'
          // });
          break;
        case 'navigateTo':
          uni.navigateTo({
            url: url,
          });
          break;
        case 'ToMiniProgram':
          uni.navigateToMiniProgram({
            appId: appid,
            path: url,
          });
          break;
        default:
          break;
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.template-index {
  max-height: 100vh;

  .custom-nav {
    height: 100%;

    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      margin-left: 30rpx;
      flex-basis: 5%;
    }

    &__search {
      flex-basis: 60%;
      width: 100%;
      height: 100%;

      &__box {
        width: 100%;
        height: 70%;
        padding: 10rpx 0;
        margin: 0 30rpx;
        border-radius: 60rpx;
        font-size: 24rpx;
      }

      &__icon {
        padding-right: 10rpx;
        margin-left: 20rpx;
        font-size: 30rpx;
      }

      &__text {
        color: #AAAAAA;
      }
    }
  }

  .badge {
    position: absolute;
    top: -5rpx;
    right: 5rpx;
  }

  .tn-tabbar-height {
    min-height: 100rpx;
    height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
}

.card-swiper {
  height: 450rpx !important;
}

.card-swiper swiper-item {
  width: 750rpx !important;
  left: 0rpx;
  box-sizing: border-box;
  overflow: initial;
}

.card-swiper swiper-item .swiper-item {
  width: 100%;
  display: block;
  height: 100%;
  transform: scale(1);
  transition: all 0.2s ease-in 0s;
  will-change: transform;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
  transform: none;
  transition: all 0.2s ease-in 0s;
  will-change: transform;
}

.card-swiper swiper-item .swiper-item-text {
  margin-top: -320rpx;
  text-align: center;
  width: 100%;
  display: block;
  height: 50%;
  border-radius: 10rpx;
  transform: translate(100rpx, 0rpx) scale(0.9, 0.9);
  transition: all 0.6s ease 0s;
  will-change: transform;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item-text {
  margin-top: -320rpx;
  width: 100%;
  transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
  transition: all 0.6s ease 0s;
  will-change: transform;
}

.image-banner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-banner image {
  width: 100%;
  height: 100%;
}

/* 轮播指示点 start*/
.indication {
  z-index: 9999;
  width: 100%;
  height: 36rpx;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.spot {
  background-color: #FFFFFF;
  opacity: 0.6;
  width: 10rpx;
  height: 10rpx;
  border-radius: 20rpx;
  top: -60rpx;
  margin: 0 8rpx !important;
  position: relative;
}

.spot.active {
  opacity: 1;
  width: 30rpx;
  background-color: #FFFFFF;
}
</style>